<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>人脸对比</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            background-color: #ffffff;
        }

        body > div {
            overflow: auto;
        }

        #face-video-box {
            float: left;
        }

        #face-video-box > video {
            display: block;
            width: 480px;
            height: 320px;
            background-color: #000000;
        }

        #face-video-box > span {
            display: block;
            width: 480px;
            height: 30px;
            margin: auto;
            color: #ffffff;
            line-height: 30px;
            text-align: center;
            background-color: #000000;
        }

        #face-a-box {
            float: left;
        }

        #face-a-box > canvas {
            display: block;
            width: 480px;
            height: 320px;
            background-color: #000000;
        }

        #face-a-box > button {
            display: block;
            width: 480px;
            height: 30px;
            margin: auto;
            color: #ffffff;
            border: 1px solid #000000;
            background-color: #000000;
            transition: all 300ms;
        }

        #face-a-box > button:hover {
            color: #000000;
            cursor: pointer;
            background-color: #ffffff;
        }

        #face-b-box {
            float: left;
        }

        #face-b-box > canvas {
            display: block;
            width: 480px;
            height: 320px;
            background-color: #000000;
        }

        #face-b-box > button {
            display: block;
            width: 480px;
            height: 30px;
            margin: auto;
            color: #ffffff;
            border: 1px solid #000000;
            background-color: #000000;
            transition: all 300ms;
        }

        #face-b-box > button:hover {
            color: #000000;
            cursor: pointer;
            background-color: #ffffff;
        }

        #face-data-a-box {
            float: left;
        }

        #face-data-a-box > span {
            display: block;
            color: #ffffff;
            width: 480px;
            height: 320px;
            overflow: auto;
            overflow-wrap: break-word;
            background-color: #000000;
        }

        #face-data-a-box > button {
            display: block;
            width: 480px;
            height: 30px;
            margin: auto;
            color: #ffffff;
            border: 1px solid #000000;
            background-color: #000000;
            transition: all 300ms;
        }

        #face-data-a-box > button:hover {
            color: #000000;
            cursor: pointer;
            background-color: #ffffff;
        }

        #face-data-b-box {
            float: left;
        }

        #face-data-b-box > span {
            display: block;
            color: #ffffff;
            width: 480px;
            height: 320px;
            overflow: auto;
            overflow-wrap: break-word;
            background-color: #000000;
        }

        #face-data-b-box > button {
            display: block;
            width: 480px;
            height: 30px;
            margin: auto;
            color: #ffffff;
            border: 1px solid #000000;
            background-color: #000000;
            transition: all 300ms;
        }

        #face-data-b-box > button:hover {
            color: #000000;
            cursor: pointer;
            background-color: #ffffff;
        }

        #face-comparison-box {
            float: left;
        }

        #face-comparison-box > span {
            display: block;
            color: #ffffff;
            width: 480px;
            height: 290px;
            overflow: auto;
            overflow-wrap: break-word;
            background-color: #000000;
        }

        #face-comparison-box > label {
            display: block;
            width: 480px;
            height: 30px;
            margin: auto;
            color: #ffffff;
            background-color: #000000;
            transition: all 300ms;
        }

        #face-comparison-box > label > input {
            width: 350px;
        }

        #face-comparison-box > button {
            display: block;
            width: 480px;
            height: 30px;
            margin: auto;
            color: #ffffff;
            border: 1px solid #000000;
            background-color: #000000;
            transition: all 300ms;
        }

        #face-comparison-box > button:hover {
            color: #000000;
            cursor: pointer;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div>
    <fieldset id="face-video-box">
        <legend>摄像头:</legend>
        <video></video>
        <span>实时画面</span>
    </fieldset>

    <fieldset id="face-a-box">
        <legend>人物1:</legend>
        <canvas height="320" width="480"></canvas>
        <button>拍摄</button>
    </fieldset>

    <fieldset id="face-b-box">
        <legend>人物2:</legend>
        <canvas height="320" width="480"></canvas>
        <button>拍摄</button>
    </fieldset>
</div>

<div>
    <fieldset id="face-data-a-box">
        <legend>人物1数据:</legend>
        <span></span>
        <button>获取</button>
    </fieldset>

    <fieldset id="face-data-b-box">
        <legend>人物2数据:</legend>
        <span></span>
        <button>获取</button>
    </fieldset>

    <fieldset id="face-comparison-box">
        <legend>人物对比结果:</legend>
        <span></span>
        <label>
            允许误差：<input max="1.0" min="0" step="0.1" type="range" value="0.5">
        </label>
        <button>对比</button>
    </fieldset>
</div>

<script th:src="@{/static/js/jquery-3.6.0.js}" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        let video = $('#face-video-box > video')[0];

        //访问用户媒体设备的兼容方法
        function getUserMedia(constraints, success, error) {
            if (navigator.mediaDevices.getUserMedia) {
                //最新的标准API
                navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
            } else if (navigator.webkitGetUserMedia) {
                //webkit核心浏览器
                navigator.webkitGetUserMedia(constraints, success, error)
            } else if (navigator.mozGetUserMedia) {
                //firfox浏览器
                navigator.mozGetUserMedia(constraints, success, error);
            } else if (navigator.getUserMedia) {
                //旧版API
                navigator.getUserMedia(constraints, success, error);
            }
        }

        function success(stream) {
            //兼容webkit核心浏览器
            let CompatibleURL = window.URL || window.webkitURL;
            //将视频流设置为video元素的源
            console.log(stream);

            //video.src = CompatibleURL.createObjectURL(stream);
            video.srcObject = stream;
            video.play();
        }

        function error(error) {
            console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
        }

        // 开启摄像头
        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
            //调用用户媒体设备, 访问摄像头
            getUserMedia({
                video: {
                    width: 480,
                    height: 320
                }
            }, success, error);
        } else {
            alert('不支持访问用户媒体');
        }

        // 人物1拍照
        let face_a_canvas = $('#face-a-box > canvas')[0];
        $('#face-a-box > button').click(function () {
            let context = face_a_canvas.getContext('2d');
            context.drawImage(video, 0, 0, 480, 320);
        });

        // 人物2拍照
        let face_b_canvas = $('#face-b-box > canvas')[0];
        $('#face-b-box > button').click(function () {
            let context = face_b_canvas.getContext('2d');
            context.drawImage(video, 0, 0, 480, 320);
        });

        // 获取人物1数据
        $('#face-data-a-box > button').click(function () {
            $('#face-data-a-box > span').text('');
            let Pic = face_a_canvas.toDataURL("image/png");
            Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
            $.ajax({
                type: 'POST',
                url: '/face_data_get',
                data: {
                    'faceBase64': Pic
                },
                success: function (msg) {
                    if (msg.code !== 0) {
                        alert(msg.msg);
                    } else {
                        $('#face-data-a-box > span').text(msg.data);
                    }
                }
            });
        });

        // 获取人物2数据
        $('#face-data-b-box > button').click(function () {
            $('#face-data-b-box > span').text('');
            let Pic = face_b_canvas.toDataURL("image/png");
            Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");
            $.ajax({
                type: 'POST',
                url: '/face_data_get',
                data: {
                    'faceBase64': Pic
                },
                success: function (msg) {
                    if (msg.code !== 0) {
                        alert(msg.msg);
                    } else {
                        $('#face-data-b-box > span').text(msg.data);
                    }
                }
            });
        });

        // 对比人物1与人物2的数据
        $('#face-comparison-box > button').click(function () {
            $('#face-comparison-box > span').text('');
            $.ajax({
                type: 'POST',
                url: '/face_data_contrast',
                data: {
                    'face_data_a': $('#face-data-a-box > span').text(),
                    'face_data_b': $('#face-data-b-box > span').text(),
                    'max_error': $('#face-comparison-box > label > input').val()
                },
                success: function (msg) {
                    if (msg.code !== 0)
                        alert(msg.msg)
                    if (msg.msg) {
                        $('#face-comparison-box > span').text('人物1与人物2，是同一个人');
                    } else {
                        $('#face-comparison-box > span').text('人物1与人物2，不是同一个人');
                    }
                }
            });
        });
    });
</script>
</body>
</html>